<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="title" width="360px">
      <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item :label="htmlContentNumber" prop="num">
          <el-input-number v-model="form.num" :min="1" :precision="0" style="width: 260px" controls-position="right">
            <template #decrease-icon>
              <el-icon>
                <Minus />
              </el-icon>
            </template>
            <template #increase-icon>
              <el-icon>
                <Plus />
              </el-icon>
            </template>
          </el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="confirmOpera">{{ htmlContentBtAdd }}</el-button>
              </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {Minus, Plus} from "@element-plus/icons-vue";

export default {
  name: 'TigerAddBalance',
  components: { Minus, Plus },
  data() {
    return {
      dialogVisible: false,
      title: chrome.i18n.getMessage('tigerContentAddFormTitle'),
      htmlContentNumber: chrome.i18n.getMessage('tigerContentAddFormItemNum'),
      htmlContentBtAdd: chrome.i18n.getMessage('commonBtnAdd'),
      form: {
        num: 1000
      },
      rules: {
        num: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { type: 'number', message: '请输入数字', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods:　{
    /**
     * 显示.
     */
    show () {
      this.form.num = 10000
      this.dialogVisible = true
    },
    /**
     * 确认操作.
     */
    confirmOpera() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit('confirm', this.form.num)
          this.dialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>


<style scoped>

</style>